import React, { useEffect, useState } from 'react';
import { Table, Input, Button, Pagination, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { loginLogListLength, returnLoginListData, searchLoginLogList, clearLoginLogList } from '@/api/log/index';
import dayjs from 'dayjs';

const LoginLog = () => {
  const [account, setAccount] = useState('');
  const [tableData, setTableData] = useState([]);
  const [paginationData, setPaginationData] = useState({
    loginTotal: 1,
    loginPageCount: 1,
    loginCurrentPage: 1,
  });


  // 获取登录次数列表的页数
  const fetchLoginListLength = async () => {
    const res = await loginLogListLength();
    setPaginationData(prev => ({
      ...prev,
      loginTotal: res.length,
      loginPageCount: Math.ceil(res.length / 10),
    }));
  };

  // 获取登录日志的第一页数据
  const getLoginFirstPageList = async () => {
    const data = await returnLoginListData(1);
    setTableData(data);
  };

  useEffect(() => {
    fetchLoginListLength();
    getLoginFirstPageList();
  }, []);

  // 登录日志换页
  const handlePageChange = async (page) => {
    setPaginationData(prev => ({ ...prev, loginCurrentPage: page }));
    const data = await returnLoginListData(page);
    setTableData(data);
  };

  // 搜索功能
  const searchLoginAccount = async () => {
    if(!account) {
      fetchLoginListLength()
      getLoginFirstPageList()
      return
    }
    console.log(account)
    const data = await searchLoginLogList(account);
    setTableData(data);
  };

  const clearList = async () => {
    const res = await clearLoginLogList()
    if (res.status == 0) {
      message.success('清空成功');
      fetchLoginListLength()
      getLoginFirstPageList()
    }
  };

  const columns = [
    {
      title: '账号',
      dataIndex: 'account',
      key: 'account',
    },
    {
      title: '名字',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '联系方式',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '登录时间',
      dataIndex: 'login_time',
      key: 'login_time',
      render: (text) => <div>{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : ''}</div>,
    },
  ];

  return (
    <div className="table-wrapped">
      <div className="table-top">
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
          <div>
            <Input
              className="w-50 m-2"
              size="large"
              placeholder="输入账号进行搜索"
              prefix={<SearchOutlined />}
              value={account}
              onChange={(e) => setAccount(e.target.value)}
              onPressEnter={searchLoginAccount}
              allowClear
            />
          </div>
          <div className="upload-wrapped">
            <Button type="primary" onClick={clearList}>
              清空操作日志
            </Button>
          </div>
        </div>
        <div className="table-content">
          <Table
            columns={columns}
            dataSource={tableData}
            pagination={false}
            rowKey="id"
            style={{ width: '100%' }}
          />
        </div>
      </div>
      <div style={{
        display: 'flex',
        justifyContent: 'flex-end',
        marginTop: 20,
      }}>
        <Pagination
          current={paginationData.loginCurrentPage}
          pageSize={1}
          total={paginationData.loginTotal}
          onChange={handlePageChange}
          showSizeChanger={false}
          showQuickJumper
        />
      </div>
    </div>
  );
};

export default LoginLog;
